<template>
  <div>
    <el-card>
      <el-form>
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单编号:" label-width="130px">
              <el-input v-model="page.id"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单状态:">
              <el-select v-model="page.status" placeholder="请选择">
                <el-option
                  v-for="item in list2"
                  :key="item.status"
                  :label="item.value"
                  :value="item.status"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="付费状态:">
              <el-select v-model="page.paymentStatus" placeholder="请选择">
                <el-option
                  v-for="item in list1"
                  :key="item.paymentStatus"
                  :label="item.value"
                  :value="item.paymentStatus"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="发件人姓名:" label-width="130px">
              <el-input v-model="page.senderName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发件人电话:" label-width="130px">
              <el-input v-model="page.senderPhone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发件人地址:" label-width="130px">
<!--                                         省                                       -->
              <el-select v-model="page.senderProvinceId" placeholder="请选择省" @change="ProvinceChange($event)" class="select">
                <el-option
                  v-for="item in mapList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
<!--                                            市                                                          -->
              <el-select v-model="page.senderCityId" placeholder="请选择市" @change="ProvinceChange1($event)" class="select">
                <el-option
                  v-for="item in mapCityList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
<!--                                               县-->
              <el-select v-model="page.senderCountyId" placeholder="请选择县" class="select">
                <el-option
                  v-for="item in mapCountyList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="收件人姓名:" label-width="130px">
              <el-input v-model="page.receiverName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收件人电话:" label-width="130px">
              <el-input v-model="page.receiverPhone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收件人地址:" label-width="130px">
              <!--                                         省                                       -->
              <el-select v-model="page.receiverProvinceId" placeholder="请选择省" @change="ProvinceChange($event)" class="select">
                <el-option
                  v-for="item in mapList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <!--                                            市                                                          -->
              <el-select v-model="page.receiverCityId" placeholder="请选择市" @change="ProvinceChange1($event)" class="select">
                <el-option
                  v-for="item in mapCityList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <!--                                               县-->
              <el-select v-model="page.receiverCountyId" placeholder="请选择县" class="select">
                <el-option
                  v-for="item in mapCountyList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号"/>
        <el-table-column prop="id" label="订单编号" />
        <el-table-column prop="transportOrder.id" label="运单编号"/>
        <el-table-column prop="estimatedArrivalTime" label="下单时间"/>
        <el-table-column prop="status" label="订单状态">
          <template  #default="{row}">
            <span>{{row.status === 23000 ? '待取件' : row.status === 23001 ? '已取件' : row.status === 23005 ? '运输中' : row.status === 23008 ? '派送中' : row.status === 23009 ? '已签收' : row.status === 23010 ? '拒收': row.status === 230011 ? '已取消':'全部'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="senderName" label="发件人姓名"/>
        <el-table-column prop="senderPhone" label="发件人电话"/>
        <el-table-column prop="senderProvince.name" label="发件人地址">
          <template  #default="{row}">
            <span>{{row.senderProvince.name}}{{row.senderCity.name}}{{row.senderCounty.name}}{{row.senderAddress}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="receiverName" label="收件人姓名"/>
        <el-table-column prop="senderPhone" label="收件人电话"/>
        <el-table-column prop="" label="收件人地址">
          <template  #default="{row}">
            <span>{{row.receiverProvince.name}}{{row.receiverCity.name}}{{row.receiverCounty.name}}{{row.receiverAddress}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作">
          <template #default="{row}">
            <el-button type="text" size="small" @click="topath(row.id,row.status,row.transportOrder.id)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--    分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { getOrderList } from '@/api/business'
import { getAreasApi, getAreasByIdAPI } from '@/api/instiution'

export default {
  name: 'order-manage',
  data () {
    return {
      page: {
        id: '', // 订单标号
        page: 1,
        pageSize: 10,
        paymentStatus: '', // 付费状态
        pickUpType: '',
        receiverName: '', // 收件人姓名
        receiverPhone: '', // 收件人电话
        receiverProvinceId: '', // 收件人省
        receiverCityId: '', // 收件人市
        receiverCountyId: '', // 收件人县
        senderCityId: '',
        senderCountyId: '',
        senderName: '', // 发件人姓名
        senderPhone: '', // 发件人电话
        senderProvinceId: '',
        status: ''// 订单状态
      },
      list1: [
        {
          paymentStatus: '1',
          value: '未付'
        },
        {
          paymentStatus: '2',
          value: '已付'
        }
      ], // 付费状态数组
      list2: [
        {
          status: 23000,
          value: '待取件'
        },
        {
          status: 23001,
          value: '已取件'
        },
        {
          status: 23005,
          value: '运输中'
        },
        {
          status: 23008,
          value: '派送中'
        },
        {
          status: 23009,
          value: '已签收'
        },
        {
          status: 23010,
          value: '拒收'
        },
        {
          status: 230011,
          value: '已取消'
        },
        {
          status: '',
          value: '全部'
        }
      ], // 订单状态属数组
      tableData: [],
      total: 0,
      mapList: [], // 省级地图
      mapCityList: [], // 市级地图
      mapCountyList: [], // 县级地图
      senderProvinceId: '', // 发件人省级id
      senderCityId: '', // 发件人市级id
      senderCountyId: ''// 发件人区级id

    }
  },
  created () {
    this.getOrderList()
    this.getMapData()
  },
  methods: {
    // 获取订单分页数据
    async getOrderList () {
      const res = await getOrderList(this.page)
      console.log(res)
      this.tableData = res.data.items
      this.total = +res.data.counts
    },
    // 监听pagesize改变
    handleSizeChange (newSize) {
      this.page.pagesize = newSize
      console.log(this.page.pagesize)
    },
    // 监听pagename改变
    async handleCurrentChange (newNum) {
      this.page.page = newNum
      console.log(this.page.page)
      this.getOrderList()
    },
    // 搜索
    search () {
      this.getOrderList(this.page)
    },
    // 重置
    reset () {
      this.page = {
        id: '', // 订单标号
        page: 1,
        pageSize: 10,
        paymentStatus: '', // 付费状态
        pickUpType: '',
        receiverCityId: '',
        receiverCountyId: '',
        receiverName: '', // 收件人姓名
        receiverPhone: '', // 收件人电话
        receiverProvinceId: '',
        senderCityId: '',
        senderCountyId: '',
        senderName: '', // 发件人姓名
        senderPhone: '', // 发件人电话
        senderProvinceId: '',
        status: ''// 订单状态
      }
      this.getOrderList()
    },
    topath (id, status, transportOrder) {
      console.log(id, status, transportOrder)
      this.$router.push({
        path: '/business/edit-order',
        query: { orderId: id, status: status, pickUpType: 0, transportOrderId: transportOrder }
      })
    },
    // 获取地图下拉框三级联动数据
    async getMapData () {
      const res = await getAreasApi()
      console.log(res)
      this.mapList = res.data
    },
    // 下拉框选中值变化时触发
    async ProvinceChange (a) {
      console.log(a)// 发件人省级id
      const res = await getAreasByIdAPI(a)
      console.log(res)
      this.mapCityList = res.data
    },
    async ProvinceChange1 (a) {
      console.log(a)
      const res = await getAreasByIdAPI(a)
      console.log(res)
      this.mapCountyList = res.data
    }
  }
}

</script>

<style>
.select{
  width: 75px;
}
</style>
